<template>
  <div calss="container">
    <div>父组件</div>
    <ul>
      <li>
        <h3>父子组件通信</h3>
        <!-- 父组件传递信息后,子组件通过props接受数据,并且可以通过type定义类型
通过default设置默认值 -->
        <child
          @updataMsg="updataMsgFun"
          :childMsg="preventMsg"
          :msg2="preventObj"
        ></child>
      </li>
      <li>
        <h3>子父组件通信</h3>
        <!-- 子组件中$emit派发一个自定义事件,第二个参数就是传递的数据,父组件中,监听
获取传递过来的数据 -->
        <childTwo ref="childTwo" @childTwoMsg="getMsg"></childTwo>
      </li>
      <li>
        <h3>兄弟组件通信</h3>
      </li>
      <li>
        <h3>跨层组件通信</h3>
        <grandson></grandson>
      </li>
    </ul>
  </div>
</template>

<script>
import child from "@/views/componentProps/children.vue";
import grandson from "./grandson.vue";
import childTwo from "@/views/componentProps/children2.vue";
export default {
  props: {},
  provide() {
    return {
      test: "父组件传给孙组件",
      getMsg: this.getMsg,
    };
  },
  data() {
    return {
      preventMsg: "这是一条父组件信息",
      preventObj: {
        msg: "这是一条父组件对象中的信息",
      },
    };
  },
  // 计算属性
  computed: {},
  // 方法集合
  methods: {
    getMsg(res) {
      console.log(`'父组件接收子组件2传来的信息是'${res}`);
    },
    updataMsgFun(ref) {
      this.preventMsg = ref;
    },
  },
  // 生命周期 - DOM元素渲染前调用
  created() {},
  // 生命周期 - DOM元素渲染后调用
  mounted() {
    this.$refs.childTwo.sendMsg();
  },
  components: {
    child,
    childTwo,
    grandson,
  },
};
</script>
<style lang='less' scoped>
ul {
  width: 500px;
  list-style: none;
  margin-left: 20px;
  li {
    width: 25%;
  }
}
</style>
